<template>
<div>
  <el-divider content-position="center">申诉审批</el-divider>
  <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="region"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
        prop="aname"
        label="姓名"
        sortable
        width="150">
    </el-table-column>
    <el-table-column
        prop="oid"
        label="订单号"
        sortable
        width="150">
    </el-table-column>
    <el-table-column label="审核佐证" width="150">
      <template slot-scope="{row}">
        <el-image
            style="width: 100px; height: 100px"
            :src="row.appHref[0]"
            :preview-src-list="row.appHref">
        </el-image>
      </template>
    </el-table-column>
    <el-table-column
        prop="aaccount"
        label="手机号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="appMsg"
        label="审核信息"
        width="180">
    </el-table-column>
    <el-table-column
        prop="appStatus"
        label="审核状态">
      <template slot-scope="scope">
        <el-tag
            :type="scope.row.appStatus === '0' ? 'warning' : 'success'"
            disable-transitions>{{scope.row.appStatus === '0' ? '待处理':'已处理'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="success"
            :disabled="scope.row.aaccountStatus === '0'"
            @click="handleEdit(scope.$index, scope.row)">解冻</el-button>
        <el-button
            size="mini"
            type="warning"
            @click="handleDelete(scope.$index, scope.row)">回复</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="deleteAppeal(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
export default {
  name: "AppealApproval",
  data(){
    return{
      tableData: [],
      url:'',
      srcList:[]
    }
  },
  methods:{
    handleEdit(index, row) {
      axios({
        method:'get',
        url: `http://localhost:8081/freeze/thawAgencyApply/${row.appId}`
      }).then(res => {
        if (res.data.code === 0){
          this.$message({
            message: '更新成功!',
            type: 'success'
          });
        }
        setInterval(function () {
          location.href = "/appealApproval"
        },1000)
      }).catch(err =>{
        console.log(err)
      })
    },
    handleDelete(index, row) {
      console.log(row)
      this.$prompt('请回复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的回复是: ' + value
        });
        axios({
          method:'post',
          url:`http://localhost:8081/appeal/sendAnswer/${row.aid}/${row.appId}`,
          data:{
            msg:value
          }
        }).then(res => {
          console.log(res)
          setInterval(function () {
            location.href = "/appealApproval"
          },1000)
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    deleteAppeal(index,row){
      axios({
        method:'get',
        url:`http://localhost:8081/appeal/deleteAppeal/${row.appId}`
      }).then(res => {
        this.$message({
          message: '删除成功!',
          type: 'success'
        });
        setInterval(function () {
          location.href = "/appealApproval"
        },1000)
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    let agency = JSON.parse(sessionStorage.getItem("agency"))
    axios({
      method:'get',
      url:`http://localhost:8081/appeal/getAppeal/${agency.aid}`
    }).then(res=>{
      console.log(res)
      this.tableData = res.data.data
    }).catch(err=>{
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>
